<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="pd-30">
			<view class="flex">
				<view class="tab flex-center mr-20 ft" :class="{ active: selectIndex === index }"
					v-for="(item, index) in tabList" :key="index" @click="selectTab(index)">{{ item }}</view>
			</view>
			<view class="ft c-99 mt-20" v-if="selectIndex === 0">{{ '可用优惠券（相同类型只能选择一种）' }}</view>
			<view class="ft c-99 mt-20" v-else>{{ '项目领过但已过期的券' }}</view>
			<view class="flex mt-20" v-for="(item) in (selectIndex === 0 ? couponList : expireCouponList)"
				:key="item.id" @click="checkCoupon(item)">
				<view class="left" :class="{ noDate: selectIndex === 1 }">
					<text class="tip pd-8 c-ff  ft ft-20">{{ item.preferential_name }}</text>
					<view class="mt-10 jia">
						<view class="ft1 ft-num">{{ item.currency_symbol + item.reduce }}</view>
						<view class="ft ft-22 text_center" v-if="item.cate == 1 || item.cate == 2">
							{{ item.type_name }}</view>
						<view class="ft" style="white-space: nowrap;" v-else-if="item.cate == 3">
							{{ "服务费" + item.discount + '折券' }}</view>
					</view>
				</view>
				<view class="right flex-bwt pd-20">
					<view class="ml-20 mt-10">
						<view class="ft1 ft-24">{{ item.txt }}</view>
						<view class="ft mt-12 c-99">{{ item.start_time + ' ~ ' + item.end_time }}</view>
					</view>
					<image class="mr-10" style="width: 30rpx;height: 30rpx;"
						src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="item.is_check == 1"></image>
					<image class="mr-10" style="width: 30rpx;height: 30rpx;"
						src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png" v-if="item.is_check == 0">
					</image>
				</view>
			</view>
			<view class="com-empty" v-if="selectIndex === 0 && couponList.length == 0">暂无数据</view>
			<view class="com-empty" v-if="selectIndex !== 0 && expireCouponList.length == 0">暂无数据</view>
		</view>
		<view style="height: 166rpx;"></view>
		<view class="confirm pd-10 flex-center" v-if="selectIndex === 0">
			<view class="allPrice flex">
				<text class="ft1 ml-20 ft-22">{{ "已选优惠￥" }}</text>
				<text class="ft-num ft-44">{{ totalPrice }}</text>
				<text class="ft1 ft-22">{{ "元" }}</text>
			</view>
			<view class="submit ml-20 flex-center ft1 c-dbf" @click="sub">确定</view>
		</view>
	</view>
</template>
<script setup lang="js">
import {
	onLoad
} from '@dcloudio/uni-app'
import {
	ref,
	reactive,
	onMounted,
	getCurrentInstance
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

import navHead from '@/components/navHead.vue';
const headData = reactive({
	color: '#fff',
	title: '白菜优惠券'
})

const {
	proxy
} = getCurrentInstance();

const tabList = ref([
	'可使用',
	'已过期'
])
const selectIndex = ref(0);
const selectTab = (idx) => {
	selectIndex.value = idx
}

const checkCoupon = (item) => {
	if (item.cate == 0) return
	if (selectIndex.value === 1) {
		return
	}
	// if(item.is_check===1){

	// }else{
	// 	checkCouponData.value.push(item.id)
	// }	
	couponList.value.forEach((v, index) => {
		if (v.id !== item.id && v.type === item.type && v.cate != 0) {
			couponList.value[index].is_check = 0
		} else if (v.id === item.id && item.is_check === 1) {
			couponList.value[index].is_check = 0
		} else if (v.id === item.id && item.is_check === 0) {
			couponList.value[index].is_check = 1
		}
	})
	getTotal()
}

const totalPrice = ref(0)
const getTotal = () => {
	totalPrice.value = 0
	couponList.value.map(item => {
		totalPrice.value += item.is_check == 1 ? parseFloat(item.exchange_price) : 0
	})
	totalPrice.value = totalPrice.value.toFixed(2)
}

const checkCouponData = ref([])
const couponList = ref([])
const expireCouponList = ref([])
onLoad((options) => {
	const eventChannel = proxy.getOpenerEventChannel();
	// 接收数据
	eventChannel.on('toDetail', (data) => {
		couponList.value = data.coupon_list
		expireCouponList.value = data.expire_coupon_list
		couponList.value.forEach(item => {
			if (item.is_check == 1) {
				checkCouponData.value.push(item.id)
			}
		})
		getTotal()
	});
})

const sub = () => {
	const eventChannel = proxy.getOpenerEventChannel();
	checkCouponData.value = []
	couponList.value.forEach(item => {
		if (item.is_check == 1) {
			checkCouponData.value.push(item.id)
		}
	})
	console.log(checkCouponData.value, 123456)
	eventChannel.emit('fromDetail', {
		coupon_id: checkCouponData.value
	});
	uni.navigateBack(-1)
}

// const couponsList =ref([
//     {id:1,type:'周年盛典',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:2,type:'本周白菜价',price:'￥15,000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:3,type:'尊享会员',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:4,type:'新人券',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:5,type:'拼团返现',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:6,type:'拼团返现',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:7,type:'拼团返现',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:8,type:'拼团返现',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},
//     {id:9,type:'周年盛典',price:'$2000',des:'服务费立减券',isSlect:false,date:'2024.11.11-2024.11.15'},

// ])
</script>

<style lang="scss" scoped>
.tab {
	width: 124rpx;
	height: 72rpx;
	background: #F8F8F8;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	color: #666666;
}

.active {
	background: #DBF046;
	color: #333333;
}


.left {
	width: 182rpx;
	height: 144rpx;
	background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	box-sizing: border-box;

	.tip {
		//  width: 88rpx;
		height: 36rpx;
		background: #333333;
		border-radius: 20rpx 8rpx 8rpx 8rpx;
	}

	.jia {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

.noDate {
	background: #F1F1F1;
}

.right {
	width: 508rpx;
	height: 144rpx;
	background: #F8F8F8;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.confirm {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.allPrice {
		width: 478rpx;
		height: 78rpx;
		background: #DBF046;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.submit {
		width: 192rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}
</style>